<template>
  <el-dialog append-to-body title="开线检查" :visible.sync="showModal" width="60%" top="5vh" @close="handleClose">
    <div v-for="(item, index) in checkDetail" :key="index">
      <template v-if="item.checkItemType === 'MATERIAL'">
        <h3>一、检查类型：物料</h3>
        <div class="checkItem" v-for="(itemDetail, index) in item.checkItemList" :key="index">
          <div class="checkItemDetail">
            {{ itemDetail.sort }}
            <el-input v-model="itemDetail.checkItemContent" readonly></el-input>
          </div>
          <div>
            <label>启用：</label>
            <el-switch v-model="itemDetail.isEnable" active-text="是" inactive-text="否"></el-switch>
          </div>
        </div>
      </template>
      <template v-if="item.checkItemType === 'PERSONNEL'">
        <h3>二、检查类型：人员</h3>
        <div class="checkItem" v-for="(itemDetail, index) in item.checkItemList" :key="index">
          <div class="checkItemDetail">
            {{ itemDetail.sort }}
            <el-input v-model="itemDetail.checkItemContent" readonly></el-input>
          </div>
          <div>
            <label>启用：</label>
            <el-switch v-model="itemDetail.isEnable" active-text="是" inactive-text="否"></el-switch>
          </div>
        </div>
      </template>
    </div>
    <div slot="footer" class="dialog-footer close">
      <el-button size="small" icon="el-icon-circle-close" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit()"><i class="el-icon-circle-plus-outline"></i><span>提 交</span></el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    checkDetail: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  mounted() {
    console.log(this.checkDetail);
  },
  methods: {
    handleClose() {
      // 清空搜索框状态
      this.$emit('close', '');
      this.checkDetail = [];
    },
    handleSubmit() {
      this.$emit('submitCheckItem', this.checkDetail);
    }
  }
};
</script>
<style lang="scss" scoped>
.checkItem {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
  .checkItemDetail {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 95%;
    }
  }
}
</style>
>
